<template lang="pug">
  .ApplyInvoice
    Modal(
      width="80%"
      v-model="isShowCustomerSalaryDetailModal"
      title="薪资明细"
      class-name="vertical-center-modal"
      footer-hide
    )
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="customerSalaryTable")
        .clearfix.pr-24.pl-12(slot="header")
          .table-title-lefttxt.pull-left
            Button.ml-10(type="info" @click="exportSalaryDetails") 导出

        template(slot-scope="{ row, index }" slot="action") ￥{{row.realSalaryTotal}}

        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            prev-text="上一页"
            next-text="下一页"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )

</template>

<script>
import { BillApi } from '@/api/Bill.api.js'
// import { EmployeeSalaryApi } from '@/api/EmployeeSalary.api.js'
import { Common } from '@/utils/common.js'
import { tableXinzimingxiThead } from '../../../../business-sector/customerManage/CustomerBill/modal/modalTableHead.js'
import _cloneDeep from 'clone-deep'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')
export default {
  name: '',

  data () {
    return {
      isShowCustomerSalaryDetailModal: false,
      // salaryId: '',
      // salaryMonth: '',
      companyName: null,
      companyId: null,
      year: null,
      month: null,
      thead: _cloneDeep(tableXinzimingxiThead),
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10 // 当前页面展示条数
      },
      // formData: {
      //   name: '',
      //   month: ''
      // },
      downLoadUrl: ''
    }
  },

  watch: {
  },

  mounted () {
    // this.salaryId = this.$route.query.id
    // this.salaryMonth = this.$route.query.month
    // this.query()
    this.downLoadUrl = '/api/EmployeeSalary/Export?SalaryGUID=' + this.salaryId + '&SalaryMonth=' + this.month
  },

  methods: {
    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    // async query () {
    //   var params = {
    //     SalaryGUID: this.salaryId,
    //     SalaryMonth: this.salaryMonth,
    //     HasPaging: true,
    //     PageIndex: this.tableComone.pageIndex,
    //     PageSize: this.tableComone.pageSize
    //   }
    //   let res = await EmployeeSalaryApi.getList(params)
    //   console.log('客户薪资res: ', res)
    //   if (res.status === 200 && res.data.success) {
    //     this.tableData = res.data.data
    //     this.tableComone.totalRows = res.data.totalRows
    //   } else {
    //     this.tableData = []
    //   }
    //   this.loading = false
    // },
    async query () {
      var params = {
        CompanyId: this.companyId,
        Year: this.year,
        Month: this.month,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await BillApi.salaryDetails(params)
      console.log('薪资明细列表res: ', res)
      if (res.status === 200 && res.data.success && res.data.data) {
        this.tableData = res.data.data.details
        this.tableComone.totalRows = res.data.totalRows
        this.companyName = res.data.data.companyName

        // this.formItem.map(col => {
        //   col.value = res.data.data[col.key]
        // })
      } else {
        this.tableData = []
        // this.$Message.error({
        //   content: res.data.message,
        //   duration: 10,
        //   closable: true
        // })
      }
      this.loading = false
    },

    // 导出
    async exportSalaryDetails () {
      var params = {
        companyID: this.companyId,
        companyName: this.companyName,
        year: this.year,
        month: this.month,
        // pageIndex: this.tableComone.pageIndex,
        pageSize: 10000
      }
      console.log('导出params: ', params)
      let res = await BillApi.exportSalaryDetails(params)
      if (res.status === 200 && res.data.success) {
        console.log('❤ 返回链接: ', baseUrl + res.data.message)
        window.open(baseUrl + res.data.message, '_blank')
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    }
  }
}
</script>

<style lang="less" scope>
</style>
